import CustomBlockquote from "@/components/Blockquote";
import CustomerTable from "@/components/CustomerTable";
import FilterDrawer from "@/components/FilterDrawer";
import { getPageList, forceLogout } from "@/services/api/module/system/online";
import { ActionType, ProColumns, ProTable } from "@ant-design/pro-components";
import type { FormInstance } from "antd";
import { Button, Input, Modal, Space, message } from "antd";
import React, { useEffect, useRef, useState } from "react";
import { createTableColumns, pagination, tableTitle } from "./constants";
const OnlineUserTableList: React.FC = () => {
	const formTableRef = useRef<FormInstance>();
	const actionRef = useRef<ActionType>();
	const [searchFormValue, setSearchFormValue] = useState<any>(undefined);
	const [searchValue, setSearchValue] = useState<any>(undefined);
	const handleColumnRemove = async (record: any) => {
		return new Promise<void>((resolve, reject) => {
			return forceLogout(record.tokenId)
				.then((res: any) => {
					actionRef?.current?.reload();
					resolve();
				})
				.catch(() => {
					reject();
				});
		});
	};
	// 列表字段
	const columns: ProColumns<API.Setting.OnlineUserType>[] = createTableColumns(handleColumnRemove);
	const tableDataRequest = async (params: any | undefined) => {
		return await getPageList({ ...searchFormValue, ...searchValue }).then((res: any) => {
			return res;
		});
	};
	const handleOnSearch = async (value: any) => {
		setSearchValue({
			userName: value
		});
		actionRef.current?.reload();
	};

	return (
		<CustomerTable<API.Setting.OnlineUserType>
			headerTitle={tableTitle}
			toolbar={{
				search: (
					<Space>
						<Input.Search placeholder="通过用户账号搜索" allowClear style={{ width: 280 }} onSearch={handleOnSearch} />
						<FilterDrawer
							columns={columns}
							tableActionRef={actionRef}
							onReset={() => {
								setSearchFormValue(undefined);
								actionRef?.current?.reload();
							}}
							onSubmit={(values: any) => {
								setSearchFormValue(values);
								actionRef?.current?.reload();
							}}
						/>
					</Space>
				)
			}}
			search={false}
			pagination={pagination}
			tableAlertRender={false}
			actionRef={actionRef}
			formRef={formTableRef}
			rowKey="tokenId"
			key="logininforList"
			request={tableDataRequest}
			columns={columns}
		/>
	);
};

export default OnlineUserTableList;
